<template>
	<section>
		<h4>{{title}}</h4>
		<el-table :data="data">
			<el-table-column label="名称">
				<template slot-scope="scope">
					{{scope.row.name}}
				</template>
			</el-table-column>
			<el-table-column label="类型">
				<template slot-scope="scope">
					{{scope.row.type}}
				</template>
			</el-table-column>
			<el-table-column label="子菜单">
				<template slot-scope="scope">
					{{scope.row.subButtons.length}}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="90">
				<template slot-scope="scope">
					<icon class="table-icon" name="pencil" @click.native="edit(scope.row)" scale="1.2"></icon>
					<icon class="table-icon" name="remove" @click.native="remove(scope.row)" scale="1.2"></icon>
				</template>
			</el-table-column>
		</el-table>

		<el-col :span="24" align="right" style="margin-top: 15px;">
			<el-button @click.native="create"><icon name="plus"></icon></el-button>
		</el-col>
		<WxButton ref="wxbutton" v-on:submit="submit"></WxButton>
	</section>
</template>

<script>
	import WxButton from './WxButton.vue';
	export default {
		name:'button-table',
		components:{WxButton},
		props:['data','title'],
		methods:{
			submit(button){
				this.data.push(button);
				this.$emit('update',{buttons:this.data});
			},
			remove(button){
				this.$emit('remove',button);
			},
			edit(button){
				this.$emit('edit',button);
			},
			create(){
				this.$refs.wxbutton.initialize();
			},
		}
	}
</script>

<style lang="scss">
	.table-icon{
		cursor: pointer;
		margin: 3px;
		margin-top: 10px;
		&:hover{
			fill: crimson;
		}
	}
</style>
